<template>
  <div id="home-map"></div>
</template>

<script lang="ts">
export default {
  name: "HomeMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";

// 回调设置到window上
window.initBMap = () => {
  // 指定哪个容器
  const map = new BMapGL.Map("home-map");
  // 指定哪个经纬度
  const point = new BMapGL.Point(114.05, 22.5);
  // 初始化地图
  map.centerAndZoom(point, 12);
  // 添加缩放控件
  var zoomCtrl = new BMapGL.ZoomControl();
  map.addControl(zoomCtrl);
  // 添加比例尺控件
  var scaleCtrl = new BMapGL.ScaleControl();
  map.addControl(scaleCtrl);
  // 添加城市列表控件
  var cityCtrl = new BMapGL.CityListControl();
  map.addControl(cityCtrl);
};

onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=bOt8IflvDEj0kHZVaB0V1NqCt8GL56En&callback=initBMap";
  document.body.appendChild(script);
});
</script>

<style scoped>
#home-map {
  width: 100%;
  height: 600px;
  margin: 20px 0;
}
</style>
